<template>
	<view class="withdraw-viewport">
		<view class="banner-wrapper">
			<view class="place-holder-top"></view>
			<view class="place-holder-bottom"></view>
		</view>
		<view class="body-container">
			<view class="title-item" v-if="false">
				<view class="title-flag"></view>
				<view class="title-txt">
					入帐帐户
				</view>
			</view>
			<view class="bind-info-card" v-if="false">
				<view class="info-avatar">
					
				</view>
				<view class="info-content">
					<view class="card-name">
						中国工商银行上海市金茂大夏支行
					</view>
					<view class="card-code">
						尾号0664
					</view>
				</view>
			</view>
			<view class="title-item">
				<view class="title-flag"></view>
				<view class="title-txt">
					提现金额
				</view>
			</view>
			<view class="withdraw-container">
				<view class="amount-wrapper">
					<view class="icon">
						<image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/proxy/amount.png" class="icon-image" mode="aspectFill"></image>
					</view>
					<input type="text" v-model="withdrawAmount" class="amount-inp" placeholder="点击输入金额" />
				</view>
				<view class="banlance-wrapper">
					<view class="banlance">
						<view>可提现金额: {{balance}}</view>
						<view class="withdraw-btn" @tap="doWithdrawAll">
							全部提现
						</view>
					</view>
					<view class="balance-detail">
						注: 单笔提现下限为10元, 上限为98000元
					</view>
				</view>
			</view>
			<view class="tips">

			</view>
			<view class="tui-exit">
				<tui-button shape="circle" shadow type="danger" height="88rpx" @tap="doWithdraw">确认提现</tui-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: '0.00',
				withdrawAmount: undefined
			};
		},
		onLoad(opt) {
			this.balance = opt.balance
		},
		methods: {
			doWithdrawAll() {
				const money = +this.balance
				if (money > 10) {
					this.withdrawAmount = money
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '提现金额不能低于10元',
						showCancel: false
					})
				}
			},
			async doWithdraw() {
				const money = +(this.withdrawAmount || 0)
				if (money > 0) {
					if (money > +this.balance) {
						uni.showModal({
							title: '温馨提示',
							content: '您的余额不足',
							showCancel: false
						})
					} else {
						const { success, data } = await this.$api.doWithDraw(money)
						if (success) {
							this.withdrawAmount = ''
							uni.showModal({
								title: '恭喜你',
								content: '您的提现申请成功, 请等待打款',
								showCancel: false,
								success() {
									uni.redirectTo({
										url:'/pagesA/withdrawRecord/withdrawRecord'
									})
								}
							})
						}
					}
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '提现金额不能小于10元',
						showCancel: false
					})
				}
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.withdraw-viewport {
	.banner-wrapper {
		.place-holder-top {
			background-color: #e41f19;
			height: 40rpx;
		}
		.place-holder-bottom {
			position: relative;
			border-radius: 14rpx;
			background-color: #f7f7f7;
			margin-top: -30rpx;
			height: 40rpx;
		}
	}
	.body-container {
		padding: 50rpx 50rpx 0;
		.title-item {
			display: flex;
			padding: 0 0rpx 40rpx;
			.title-flag {
				width: 10rpx;
				border-top-right-radius: 6rpx;
				border-bottom-left-radius: 6rpx;
				background-color: #ec3e30;
			}
			.title-txt {
				padding-left: 30rpx;
				color: #333;
				font-size: 28rpx;
				font-weight: 600;
			}
		}
		.bind-info-card {
			box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			padding: 28rpx 16rpx 28rpx 40rpx;
			align-items: center;
			margin-bottom: 40rpx;
			font-size: 28rpx;
			color: #555;
			.info-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #eee;
				margin-right: 40rpx;
			}
			.card-name, .card-code {
				line-height: 50rpx;
				font-weight: 400;
			}
		}
		.withdraw-container {
			box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
			border-radius: 10rpx;
			background-color: #fff;
			.amount-wrapper {
				border-bottom: 1px solid #eee;
				display: flex;
				padding: 28rpx 0;
				align-items: center;
				.icon {
					padding: 0 0 0 40rpx;
					.icon-image {
						width: 50rpx;
						height: 50rpx;
					}
				}
				.amount-inp {
					padding: 0 20rpx;
					font-size: 40rpx;
				}
			}
			.banlance-wrapper {
				padding: 28rpx 0 28rpx 40rpx;
				font-size: 28rpx;
				color: #333;
				font-weight: 400;
				.banlance {
					display: flex;
					justify-content: space-between;
					.withdraw-btn {
						color: #c71d18;
						margin-right: 40rpx;
					}
				}
				.balance-detail {
					padding-top: 20rpx;
					color: #999;
					font-size: 20rpx;
					font-weight: 400;
				}
			}
		}
		.tips {
			font-size: 24rpx;
			color: #666;
			padding: 40rpx 0rpx;
		}
		.tui-exit {
			padding: 50rpx 24rpx;
		}
	}
	
}
</style>
